<template>
  <view class="page">
    <view class="header">
      <span class="title">平台通用券包</span>
      <span class="buy-history">购买记录</span>
    </view>
    <view class="coupon-product-list">
      <view class="product" v-for="product in productList" :key="product.id">
        <view class="product-top">
          <view class="top-left">
            <span class="product-name">{{ product.name }}</span>
            <span class="activity" v-if="product.preferential != null">活动价</span>
            <span>
              <span class="now-price">￥{{ product.price - (product.preferential ?? 0) }}</span>
              <span class="price" v-if="product.preferential != null">￥{{ product.price }}</span>
            </span>
          </view>
          <view class="now-buy" @click="buyCouponProduct(product.id)">立即购买</view>
        </view>
        <view class="coupons">
          <view class="coupon-roll">
            <view class="coupon" v-for="coupon in product.couponBatchList" :key="coupon.id">
              <span class="amount"
                >{{ coupon.parValue }}<span class="min">元 x </span>{{ coupon.number }}<span class="min">张</span></span
              >
              <span class="tis">{{
                coupon.thresholdAmount == null || coupon.thresholdAmount === 0
                  ? '无门槛'
                  : `满${coupon.thresholdAmount}元可用`
              }}</span>
              <view class="desc"
                >{{
                  (coupon.maximumExpandable = CouponBatch.maximumExpandable(coupon.expansionRule))
                    ? `最高膨胀${coupon.maximumExpandable}元`
                    : `平台通用券`
                }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <simulate-payment ref="simulatePaymentRef" @cancel-payment="cancelOrder" @on-payment="toPay"></simulate-payment>
  </view>
</template>

<script setup lang="ts">
import $API from '@/api'
import CouponProduct from '@/types/entity/CouponProduct'
import { ref } from 'vue'
import { onMounted } from 'vue'
import CouponBatch from '@/types/entity/CouponBatch'
import { $modal } from '@/plugins'
import SimulatePayment from '@/components/simulate-payment/index.vue'
import type { CouponOrderPayment } from '@/types/response/coupon'
import $store from '@/store'
const productList = ref<CouponProduct[]>()
onMounted(async () => {
  const result = await $API.coupon.platformProvincialWalletList()
  if (result.success) productList.value = result.data
})
// 购买优惠券产品
async function buyCouponProduct(productId: number) {
  const result = await $API.coupon.createCouponOrder(productId)
  if (!result.success) {
    $modal.toastErrorMsg(result.message)
    return
  }
  // 调起支付
  simulatePaymentRef.value.callOut(result.data)
}
// 支付实例
const simulatePaymentRef = ref()
// 取消时，优惠券订单不支付就直接去删除了(不删除，下次时会自动拾取作为新的订单支付)
function cancelOrder() {}
// 看是否有上一页
function isHasPreviousPage() {
  let routes = getCurrentPages()
  // 上一页
  let page = routes[routes.length - 2]
  return page != null
}

// 模拟支付平台成功回调业务的后端API
async function toPay(couponOrderPayment: CouponOrderPayment) {
  const result = await $API.coupon.paymentCouponOrder(couponOrderPayment.orderId)
  if (!result.success) {
    $modal.toastErrorMsg(result.message)
    return
  }
  // 关闭支付窗口
  simulatePaymentRef.value.hide()
  // 成功支付-跳转到优惠券页
  if (isHasPreviousPage()) {
    // 通知更新优惠券列表
    $store.coupon.couponListRefresh.emit()
    // 返回
    uni.navigateBack()
  } else {
    // 将当前页面重定向为优惠券页面（自然无需通知刷新）
    uni.redirectTo({
      url: '/pages/profile/platform-coupon/index?refresh=true'
    })
  }
}
</script>

<style scoped lang="scss">
.page {
  $page-padding-size: 25rpx;

  display: flex;
  padding: 0 $page-padding-size;
  width: 100vw;
  height: 100vh;
  background-color: #f2f2f2;
  flex-direction: column;
  box-sizing: border-box;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    width: 100%;
    box-sizing: border-box;

    .title {
      font-size: 32rpx;
      font-weight: 700;
      color: #343434;
    }

    .buy-history {
      font-size: 30rpx;
      color: #5b5b5b;
    }
  }

  .coupon-product-list {
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    .product {
      $product-padding-size: 23rpx;

      margin-bottom: 20rpx;
      padding: $product-padding-size;
      border-radius: 30rpx;
      background-color: #fff;
      box-sizing: border-box;

      .product-top {
        display: flex;
        justify-content: space-between;

        .top-left {
          display: flex;
          align-items: center;

          .product-name {
            font-size: 32rpx;
            font-weight: 700;
          }

          .activity {
            margin-left: 10rpx;
            padding: 6rpx;
            font-size: 18rpx;
            border-radius: 5rpx;
            color: red;
            background-color: #feeee8;
          }

          .now-price {
            color: #f74d2a;
          }

          .price {
            font-size: 23rpx;
            text-decoration: line-through;
            color: #888;
          }
        }

        .now-buy {
          padding: 0rpx 20rpx;
          height: 50rpx;
          font-size: 25rpx;
          border-radius: 11rpx;
          background-color: #fcde00;
          line-height: 50rpx;
        }
      }

      .coupons::-webkit-scrollbar {
        display: none; /* Chrome Safari */
      }

      .coupons {
        // display: flex;
        // overflow: scroll;
        // margin-top: 10px;
        // width: 750rpx - ($page-padding-size * 2) - ($product-padding-size);
        // height: 45px;
        // box-sizing: border-box;
        overflow-x: auto;
        margin-top: 20rpx;
        margin-bottom: 10rpx;
        width: 750rpx - ($page-padding-size * 2) - ($product-padding-size);
        border-radius: 15rpx;
        box-sizing: border-box;

        .coupon-roll {
          display: inline-flex;
          overflow-x: auto;
          white-space: nowrap;

          .coupon {
            display: flex;
            justify-content: space-between;
            align-items: center;
            overflow: hidden;
            margin-right: 20rpx;
            width: 300rpx;
            border-radius: 30rpx;

            /* 实现x轴实现的重要css */
            white-space: nowrap;
            background-color: #fff7f5;
            box-shadow: 8rpx 0 4rpx #f5f5f5;
            flex-direction: column;

            .amount {
              display: block;
              padding-top: 15rpx;
              font-size: 40rpx;
              font-weight: 700;
              color: #f54a23;

              .min {
                font-size: 21rpx;
              }
            }

            .tis {
              font-size: 25rpx;
              line-height: 60rpx;
              color: #fd4724;
            }

            .desc {
              padding-top: 6rpx;
              width: 100%;
              height: 55rpx;
              font-size: 26rpx;
              font-weight: 700;
              text-align: center;
              color: #fff;
              background: linear-gradient(to right, #f56d61, #fa2d4e, #fd5b80);
              line-height: 55rpx;

              //   border-top-left-radius: 50%;
              //   border-top-right-radius: 50%;
            }
          }
        }
      }
    }
  }
}
</style>
